<template>
    <view class="detail-box">
        <!--        <wxTopStatus backgroundColor="#fff"> </wxTopStatus>-->

        <view class="p-[30rpx]">
            <userConcern
                @reGetData="getDataFn"
                :info="{
                    ...info,
                    postType: 1
                }"
                typeKey="postType"
                :isOwn="userInfo.userId === info.uid"
                idName="uid"
                @manage="manageFn"
            >
            </userConcern>
            <view class="py-[40rpx]">
                <topicList :list="info.topicList"></topicList>
            </view>

            <view class="detail-content" :style="{ paddingBottom: bottomHeight + 'px' }">
                <view class="content-text"> {{ info.content }} </view>
                <view class="img-lig">
                    <image
                        v-for="(item, index) in info.pics"
                        :key="index"
                        @click="perviewIamge(info.pics, index)"
                        mode="widthFix"
                        :src="getImgUrl(item)"
                    ></image>
                </view>

                <view class="content-createTime"> 发表于 {{ info.createTime }} </view>
            </view>

            <!--            评论-->
            <view class="forumFooter">
                <forumFooter
                    @share="shareFn"
                    @show-comment="showComment"
                    :item="info"
                ></forumFooter>
                <fui-safe-area></fui-safe-area>
            </view>
        </view>
        <fui-gallery
            :urls="info.pics"
            :current="imgCurrunt"
            :show="showPreview"
            @hide="showPreview = false"
        ></fui-gallery>

        <fui-actionsheet
            :show="showActionsheet"
            :isCancel="true"
            :itemList="itemList"
            @cancel="showActionsheet = false"
            cancelSize="28"
            @click="actionSheet"
            :maskClosable="true"
            itemSize="28"
        ></fui-actionsheet>

        <!-- 评论组件 -->
        <Comment ref="commentREF"></Comment>
        <!--    分享组件-->
        <shareCom ref="shareREF" @clickShare="clickShare"></shareCom>
    </view>
</template>

<script setup lang="ts">
import Comment from '@/components/forumList/comment.vue'
import userConcern from '../../components/detaiConcern/index.vue'
import { delPostAPI, getPostDetailAPI } from '@/api/posts'
import forumFooter from '@/components/forumList/forumFooter.vue'
import { getRect, getImgUrl } from '@/utils/util'
import shareCom from '@/components/shareCom/shareCom.vue'
const showPreview = ref(false)
const imgCurrunt = ref(0)
const perviewIamge = (pics, index: number) => {
    uni.previewImage({
        current: index,
        urls: pics.map((el: string) => getImgUrl(el))
    })
    // showPreview.value = true
    // imgCurrunt.value = index
}
// 评论组件
const commentREF = ref()
// 分享组件
const shareREF = ref()

const showActionsheet = ref(false)
const itemList = [
    {
        text: '编辑',
        size: 28
    },
    {
        text: '删除',
        size: 28
    }
]
const actionSheet = (row: any) => {
    console.log('row' + '', row)

    if (row.index === 0) {
        // 编辑

        uni.setStorageSync('editPost', info)
        uni.navigateTo({
            url: '/views/subViews/post/newPostOrVideo/index?type=1'
        })
    } else {
        // 删除
        delPostsFn(info.id)
    }
}

const delPostsFn = async (id: string) => {
    const r = await uni.showModal({
        title: '提示',
        content: '是否删除该帖子？'
    })
    if (!r.confirm) return

    const res = await delPostAPI([id], 1)
    if (res.code === 0) {
        uni.showToast({
            title: '删除成功',
            icon: 'none'
        })
        const t = setTimeout(() => {
            clearTimeout(t)
            uni.switchTab({
                url: '/views/home/index'
            })
        }, 1000)
    } else {
        uni.showToast({
            title: res.msg,
            icon: 'none'
        })
    }
}

const userInfo = uni.getStorageSync('userInfo')

// 显示评论
const showComment = (item) => {
    console.log('详情显示评论', item)
    commentREF.value.showComment(item.id)
}
//

//  展示分享
const shareFn = (row: any) => {
    console.log(info)
    shareREF.value.shareFn(row)
}
const shareContent = ref({})
// 点击分享微信  | 朋友圈
const clickShare = (e) => {
    console.log('eeeeeeeeeeee', e)
}

// 点击管理
const manageFn = (row: any) => {
    console.log('点击管理', row)
    showActionsheet.value = true
}

// 重新请求
const getDataFn = () => {
    getDetail(postId.value)
}

const postId = ref('')
//
const bottomHeight = ref(0)
onLoad(async (op) => {
    console.log('op============================', op)

    postId.value = op!.id
    getDetail(op!.id)

    const { height } = await getRect('.forumFooter')
    bottomHeight.value = height
    console.log('bottomHeight', height)
})

const info = reactive({})

const getDetail = async (id: string) => {
    const res = await getPostDetailAPI(id)
    if (res.code === 0) {
        Object.assign(info, res.data)
    }
}

uni.showShareMenu()
// 分享至朋友圈
onShareTimeline(() => {
    return {
        title: info.nickname + '发布了新帖子', //分享标题
        query: 'id=' + info.id, // 可不填 传递的参数，只能是这
        imageUrl: info.pics && info.pics.length ? info.pics[0] : ''
    }
})

onShareAppMessage((res) => {
    console.log(res, 12313)

    return {
        title: info.nickname + '发布了新帖子', //分享标题
        path: '/views/subViews/post/postDetail/index?id=' + info.id, // 可不填 传递的参数，只能是这', // 可不填 传递的参数，只能是这
        imageUrl: info.pics && info.pics.length ? info.pics[0] : '' //封面图
    }
})
</script>

<style scoped lang="scss">
.detail-box {
    .detail-content {
        .img-lig {
            padding-top: 20rpx;
            image {
                width: 100%;
            }
        }

        .content-createTime {
            color: #999999;
            font-size: 12px;
            padding: 20rpx 0 40rpx;
        }
    }
}

.forumFooter {
    position: fixed;
    bottom: 0;
    width: calc(100% - 60rpx);
    background-color: #fff;
    padding: 30rpx 0;
}
</style>
